<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .login-content {
      width: 360px;
      padding-bottom: 50px;
      margin: 0 auto;
      border: 1px solid #999;
      border-radius: 8px;
      text-align: center;
    }
    .item {
      margin-top: 40px;
      position: relative;
    }
    .item .error {
      color: tomato;
      position: absolute;
      left: 130px;
      bottom: -20px;
    }
    .item label {
      display: inline-block;
      width: 80px;
      text-align: right;
    }
    .item input {
      display: inline-block;
      font-size: 16px;
      border-bottom: 1px solid #333;
      border-top: 1px solid transparent;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      outline: none;
    }
    .btn {
      width: 100px;
      height: 40px;
      background-color: #56a5f1;
      color: whitesmoke;
      outline: none;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="login-content">
      <h1>欢迎注册</h1>
      <span>18933333333</span>
      <div class="item">
        <label>手机号:</label>
        <input type="text" autofocus 
          v-model="phone" v-on:blur="checkPhone">
        <span class="error">{{phoneErr}}</span>
      </div>
      <div class="item">
        <label>输入密码:</label>
        <input type="password" 
          v-model="pwd" v-on:blur="checkPwd">
        <span class="error">{{pwdErr}}</span>
      </div>
      <div class="item">
        <label>确认密码:</label>
        <input type="password" 
          v-model="pwd1" v-on:blur="checkPwd1">
        <span class="error">{{pwd1Err}}</span>
      </div>
      <div class="item">
        <button class="btn" v-on:click="register">注册</button>
      </div>
    </div>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        phone: '',
        pwd: '',
        pwd1: '',
        phoneErr: '',
        pwdErr: '',
        pwd1Err: '',
        userArr: []
      },
      methods: {
        register() {
          // 判断手机号和密码是否正确
          if(this.phoneErr == '' && this.pwdErr == '' && this.pwd1Err == '') {
            let userInfo = {
              phone: this.phone,
              pwd: this.pwd
            }
            // 获取用户信息，如果没有信息，就给他一个空数组
            if(localStorage.getItem('userInfo')){
              this.userArr = JSON.parse(localStorage.getItem('userInfo'))
            }else {
              this.userArr = []
            }
            console.log(this.userArr);
            // 在老数据里新增当前注册用户的数据
            this.userArr.push(userInfo);
            this.userArr = JSON.stringify(this.userArr)
            localStorage.setItem('userInfo',this.userArr)
            location.href = './0321login.html'
          }
        },
        // 校验手机号
        checkPhone() {
          if(!(/^1\d{10}$/.test(this.phone))) {
            this.phoneErr = '请重新输入手机号'
          }else {
            this.phoneErr = ''
            // 此处应该发请求查询手机号是否被占用，以JQ为例：
            // $.ajax({
            //   url: 'xxxx',
            //   type: 'post',
            //   data: {
                
            //   },
            //   success: function() {
            //     alert('账号已存在，请重新输入!!!!!')
            //   }
            // })
          }
        },
        // 校验密码
        checkPwd() {
          if(this.pwd.length < 6) {
            this.pwdErr = '请重新输入密码'
          }else {
            this.pwdErr = ''
          }
        },
        // 校验密码是否一致
        checkPwd1() {
          if(this.pwd != this.pwd1) {
            this.pwd1Err = '请确保两次输入一致'
          }else {
            this.pwd1Err = ''
          }
        }
      }
    })
  </script>
</body>
</html>